<template>
    <div class="module">
        <div class="item" v-for="item, index in dataList" :key="index">
            <div class="icon">
                <img class="image" :src="imgList[0].imgUrl" alt=""
                    v-if="item.dataItemName.indexOf('酸碱') !== -1 || item.dataItemName.indexOf('ph') !== -1 || item.dataItemName.indexOf('PH') !== -1" />
                <img class="image" :src="imgList[1].imgUrl" alt=""
                    v-else-if="item.dataItemName.indexOf('气') !== -1 || item.dataItemName.indexOf('氧') !== -1" />
                <img class="image" :src="imgList[2].imgUrl" alt="" v-else-if="item.dataItemName.indexOf('温') !== -1" />
                <img class="image" :src="imgList[3].imgUrl" alt="" v-else-if="item.dataItemName.indexOf('光') !== -1" />
                <img class="image" :src="imgList[4].imgUrl" alt="" v-else-if="item.dataItemName.indexOf('风') !== -1" />
                <img class="image" :src="imgList[5].imgUrl" alt=""
                    v-else-if="item.dataItemName.indexOf('天气') !== -1 || item.dataItemName.indexOf('云') !== -1" />
                <img class="image" :src="imgList[6].imgUrl" alt="" v-else-if="item.dataItemName.indexOf('雨') !== -1" />
                <img class="image" :src="imgList[1].imgUrl" alt="" v-else />
            </div>
            <div class="dataItem">
                <div :title="item.dataItemName" class="dataItemText">{{ item.dataItemName }}</div>
                <div v-if="item.enumListType" class="unit value">
                    {{ item.enumListType.split(';')[item.lastValue1].slice(2) }}
                </div>
                <div v-else-if="item.lastValue1 && !item.enumListType" class="unit value">
                    {{ item.lastValue1.toFixed(2) }}
                    <span v-show="item.unitName && item.unitName !== '无'">{{ item.symbol
            || item.unitName }}</span>
                </div>
                <div v-else-if="item.lastValue1 === 0 && !item.enumListType" class="unit value">
                    0{{ item.symbol }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            imgList: [
                {
                    imgUrl: require("@/assets/environment-data/image/ph.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/humidness.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/temperature.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/sun.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/fengsu.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/yun.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/yuliang.png"),
                }
            ],
        }
    },

    watch: {},
    computed: {
        dataList() {
            let newlist = []
            this.list.forEach((itemone, indexone) => {
                // 组织数据
                //console.log(itemone, "one");
                let itemonelist = [];
                // if (itemone.dataTypeConfig === undefined) {
                itemone.dataCollectNewVOList.forEach(async (itemtwo) => {
                    let nowmessage;
                    // 合并
                    nowmessage = { ...itemone.dataTypeConfig, ...itemtwo };
                    itemonelist.push({
                        ...nowmessage,
                        xaxis: parseInt(nowmessage.xaxis),
                        yaxis: parseInt(nowmessage.yaxis),
                        flag: false
                    });
                });
                newlist.push(itemonelist);
            });
            //console.log(newlist, '---')
            let arr = []
            newlist.forEach(el => {
                el.forEach(ell => {
                    arr.push(ell)
                })
            })
            //console.log(arr, 'arr');
            return arr
        }
    },
    mounted() { },
    methods: {
    }
};
</script>
<style lang="scss" scoped>
.module {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .item {
        width: calc(50% - 10px);
        margin: 0 5px;
        box-shadow: 0 2px 10px 0px rgba(0, 21, 41, 0.1);
        color: #ffffff;

        .icon {
            width: 100%;
            height: 70px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-around;
            box-sizing: border-box;
        }

        .time {
            font-size: 12px;
        }

        .dataItem {
            text-align: center;
            font-size: 14px;
            line-height: 30px;
            padding: 5px;
            box-shadow: inset 0 0px 10px 4px rgba(1, 179, 255, 0.672);


            .dataItemText {
                overflow: hidden; //超出隐藏
                text-overflow: ellipsis; //文本超出时显示省略号
                display: -webkit-box;
                -webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
                -webkit-line-clamp: 1; //内容限制的行数
            }

            .value {
                font-size: 16px;
            }
        }
    }
}
</style>